<template>
	<view class="box">
		<view class="header">
			<view class="header-l">
				<view class="header-l-nums">{{info.pf.score || ''}}</view>
				<view class="header-l-tx">{{info.pf.name || ''}}</view>
			</view>
			<view class="header-c">	
				<view class="header-c-item">
					<view class="header-c-item-tx">视频质量</view>
					<view class="header-c-item-v">
						<view :style="{width: info.pf.video_quality_score * 10 + '%'}"></view>
					</view>
				</view>
				<view class="header-c-item">
					<view class="header-c-item-tx">内容质量</view>
					<view class="header-c-item-v">
						<view :style="{width: info.pf.content_quality_score * 10 + '%'}"></view>
					</view>
				</view>
				<view class="header-c-item">
					<view class="header-c-item-tx">教学方法</view>
					<view class="header-c-item-v">
						<view :style="{width: info.pf.teaching_method_score * 10 + '%'}"></view>
					</view>
				</view>
			</view>
			<view class="header-c-r">
				<text>{{info.pf.evaluate_number}}人点评</text>
			</view>
		</view>
		<view class="comment-list">
			<view class="comment-list-item" v-for="it in list">
				<view class="comment-list-item-avatar">
					<image :src="it.head" mode="" style="border-radius: 50%;" @click.stop="toMixinIndex(1,{userId: it.user_id})"></image>
				</view>
				<view class="comment-list-item-rig">
					<view class="comment-list-item-rig-header">
						<view class="comment-list-item-rig-header-l">
							<view class="comment-list-item-rig-header-l-name">{{it.nickname}}</view>
							<image
								:src="ossUrl + `/static/setting/${it.user.sex === '女' ? '7' : '6'}.png`"
								mode=""></image>
							<!-- <view class="comment-list-item-rig-header-l-nums">{{'球龄：'+it.age || ''}}</view> -->
							<view class="comment-list-item-rig-header-l-address">{{it.address || ''}}</view>
						</view>
            <view class="comment-list-item-rig-header-r" @click="report(it)">
              <image :src="ossUrl + `/static/index/举报.png`" mode=""></image>
              举报
            </view>
					</view>
					<view class="comment-list-item-rig-star">
						<view class="comment-list-item-rig-star-tx">参与视频：{{it.course || ''}}</view>
						<view class="comment-list-item-rig-star-item">
							<u-rate :value="it.score / 2" :allowHalf="true" readonly activeColor="#F2CB51"
								inactiveColor="#B3B3B3"></u-rate>
						</view>
					</view>
					<view class="comment-list-item-rig-content">
						{{it.content}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script> 
	import {InformationCourseEvaluation, report_course_evaluate} from '@/common/http/api.js'
	export default {
		props:['info','courseId'],
		data(){
			return {
				//分页
				params:{
					page: 1,
					course_id: this.courseId
				},
				isList: true,
				list: [],
			}
		},
		created() {
			
			this.init()
		},
		methods:{
			onReachBottomHttp() {
				if(this.isList){
					this.params.page ++
					this.init()
				}
			},
			init(){
				uni.showLoading()
				InformationCourseEvaluation(this.params).then(res=>{
					uni.hideLoading()
					if(Array.isArray(res.data) && res.data.length > 0) {
						if(this.params.page === 1) {
							this.list = res.data
						} else {
							this.list = this.list.concat(res.data)
						}
					} else {
						this.isList = false
					}
				})
			},
			toClassVideo(id,userId){
				uni.navigateTo({
					url:'/pagesB/teachingCourses/teachingCourses?id=' + id 
				})
			},
			toList(){
				uni.navigateTo({
					url:'/pagesA/courseList/courseList?id='+this.info.js.id
				})
			},
      report(it) {
        uni.showModal({
          title: '',
          content: '请确认是否举报？',
          showCancel: true,
          cancelText: '取消',
          confirmText: '确认',
          confirmColor: '#12B475',
          success: res => {
            if (res.confirm) {
              uni.showLoading()
              report_course_evaluate({
                id: it.id
              }).then(res => {
                uni.hideLoading()
                uni.showToast({duration:3000,
                  title: '举报成功!',
                  icon: 'none'
                })


              })
            }
          }
        });
      },
		}
	}
</script>

<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}
	.box {
		.header {
			width: 100%;
			box-sizing: border-box;
			padding: 52rpx 43rpx;
			display: flex;
			align-items: center;
			border-bottom: 20rpx solid #F6F7F8;
			.header-l {
				margin-right: 43rpx;
				display: flex;
				width: 100rpx;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.header-l-nums {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 48rpx;
					color: #FF930A;
					margin-bottom: 21rpx;
				}
				.header-l-tx {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #FF9101;
				}
			}
			.header-c {
				flex: 1;
				min-width: 0;
				.header-c-item {
					display: flex;
					align-items: center;
					margin-bottom: 27rpx;
					.header-c-item-tx {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #131313;
						width: 110rpx;
						margin-right: 22rpx;
					}
					.header-c-item-v {
						flex: 1;
						min-width: 0;
						view {
							height: 12rpx;
							background: #F2CB51;
							border-radius: 6rpx;
						}
					}
				}
				.header-c-item:last-child {
					margin-bottom: 0;
				}
			}
			.header-c-r {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				margin-left: 20rpx;
				height: 153rpx;
				min-width: 110rpx;
			}
		}
		.comment-list {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			.comment-list-item {
				width: 100%;
				display: flex;
				padding-bottom: 40rpx;
		
				.comment-list-item-avatar {
					width: 86rpx;
					height: 86rpx;
				}
		
				.comment-list-item-rig {
					flex: 1;
					min-width: 0;
					margin-left: 22rpx;
		
					.comment-list-item-rig-header {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 26rpx;
		
						.comment-list-item-rig-header-l {
							display: flex;
							align-items: center;
		
							.comment-list-item-rig-header-l-name {
								font-family: PingFang SC;
								font-weight: 600;
								font-size: 28rpx;
								color: #211C1E;
								margin-right: 19rpx;
							}
		
							image {
								width: 22rpx;
								height: 22rpx;
								margin-right: 33rpx;
							}
		
							.comment-list-item-rig-header-l-nums {
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #211C1E;
								margin-right: 40rpx;
		
							}
		
							.comment-list-item-rig-header-l-address {
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #211C1E;
								width:320rpx;
							}
						}
		
						.comment-list-item-rig-header-r {
							display: flex;
							align-items: center;
		
							image {
								width: 28rpx;
								height: 24rpx;
								margin-right: 8rpx;
							}
		
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #999999;
						}
					}
		
					.comment-list-item-rig-star {
						display: flex;
						align-items: center;
		
						.comment-list-item-rig-star-tx {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #727272;
							margin-right: 23rpx;
						}
		
						.comment-list-item-rig-star-item {
							display: flex;
							align-items: center;
		
							image {
								margin-right: 9rpx;
								width: 22rpx;
								height: 22rpx;
							}
						}
					}
		
					.comment-list-item-rig-content {
						background: #F6F7F8;
						border-radius: 0rpx 20rpx 20rpx 20rpx;
						width: 100%;
						box-sizing: border-box;
						padding: 15rpx 25rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #211C1E;
						margin-top: 19rpx;
					}
				}
			}
		
			.comment-list-item:last-child {
				padding-bottom: 0;
			}
		}
	}
</style>